<template>
  <view class="new_main">
    <lawTopBar :title="title" :backgroundUrl="backgroundUrl"></lawTopBar>
    <view class="content">
      <view class="content_top">
        <!-- 搜索 -->
        <view class="search" @click="goSearch">
          <u-search
            placeholder="输入您想了解的内容"
            :showAction="false"
            bgColor="#fff"
            borderColor="#C4C4C4"
            height="70rpx"
            :disabled="true"
          ></u-search>
        </view>
      </view>
      <view class="tabs">
        <view
          :class="['tab', chooseTabId == item.id ? 'activeTab' : '']"
          v-for="(item, index) in tabsList"
          :key="item.id"
          @click="chooseTab(item, index)"
          >{{ item.name }}</view
        >
      </view>

      <view class="screen1" :class="chooseTabId == 2 ? 'screen_tab1' : ''">
        <view class="screen_item1">
          <biaofun-region-two-level
            @change1="changeRegion"
            @changes1="changeRegions1"
          >
            <view class="ft_item1 flex_align">
              <view class="flex_align">
                <view class="img">
                  <image
                    src="/static/img/law/icon_2.png"
                    mode="scaleToFill"
                    class="img100"
                  ></image>
                </view>
                <view class="ft ellipsis1" v-if="regionName.length > 0">
                  {{ regionName[1].name }}
                </view>
                <span v-else class="fz26">地区</span>
              </view>
              <image
                class="icon"
                src="/static/img/law/icon_3.png"
                mode="aspectFit"
              ></image>
            </view>
          </biaofun-region-two-level>
        </view>
        <view class="screen_item1" v-if="chooseTabId == 1">
          <picker
            :range="taxTypeList"
            range-key="name"
            @change="taxTypeChange"
            @cancel="taxTypeCancel"
          >
            <view class="ft_item1 flex_align">
              <view class="flex_align">
                <view class="img">
                  <image
                    src="/static/img/law/icon_0.png"
                    mode="aspectFill"
                    class="img100"
                  ></image>
                </view>
                <view class="ft ellipsis1" v-if="indexType >= 0">
                  {{ taxTypeList[indexType].name }}
                </view>
                <span v-else class="fz26">税种</span>
              </view>
              <image
                class="icon"
                src="/static/img/law/icon_3.png"
                mode="aspectFit"
              ></image>
            </view>
          </picker>
        </view>
        <view class="screen_item1 justify_center">
          <picker
            :range="potencyList"
            range-key="id"
            @change="potencyChange"
            @cancel="potencyCancel"
          >
            <view class="ft_item1 flex_align">
              <view class="flex_align">
                <view class="img">
                  <image
                    src="/static/img/law/icon_1.png"
                    mode=""
                    class="img100"
                  ></image>
                </view>
                <view class="ft ellipsis1" v-if="potencyIndex >= 0">
                  {{ potencyList[potencyIndex].id }}
                </view>
                <span v-else class="fz26">效力注释</span>
              </view>
              <image
                class="icon"
                src="/static//img/law//icon_3.png"
                mode="aspectFit"
              ></image>
            </view>
          </picker>
        </view>
      </view>

      <scroll-view
        id="content_list"
        class="content_list"
        style="height: calc(100vh - 640rpx)"
        :scroll-y="true"
        :scroll-top="scrollTop"
        refresher-enabled="true"
        :refresher-triggered="isRefreshing"
        @refresherrefresh="reload"
        @scrolltolower="loadMore"
      >
        <view
          class="content_item"
          v-for="(item, index) in lawList"
          :key="index"
          @click="toInfo(item.id)"
        >
          <view class="item_top">
            <view class="item_dot" v-if="isShowImg">
              <image
                src="/static/img/law/icon_new.png"
                mode="scaleToFill"
                class="img_icon"
              >
              </image>
            </view>
            <view class="item_title ellipsis2" v-html="item.title"></view>
          </view>
          <view class="item_bottom">
            <view class="item_dot"></view>
            <view class="item_info">
              <view class="potency">效力注释：{{ item.active_info }}</view>
              <view class="time">发文日期：{{ item.push_date }}</view>
            </view>
          </view>
        </view>
        <uni-load-more :status="loadMoreStatus"></uni-load-more>
      </scroll-view>
    </view>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../law/dis/index/index"
></script>

<style lang="scss">
.new_main {
  background: #fff;
  min-height: 100vh;

  .content {
    width: 100%;
    position: relative;
    z-index: 10;
    margin-top: -32rpx;
    background: #fff;
    border-radius: 40rpx;
    padding: 30rpx 30rpx 0 30rpx;
    box-sizing: border-box;

    .content_top {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .search {
        width: 686rpx !important;
      }

      .highSearch {
        font-size: 24rpx;
        font-weight: 600;
        color: #1c87f3;
        line-height: 28rpx;
      }
    }

    .tabs {
      display: flex;
      margin: 0 auto;
      margin-top: 19px;
      height: 78rpx;
      background: #ffffff;
      border: 1px solid #1c87f3;

      .tab {
        width: 379px;
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #1c87f3;

        &.activeTab {
          background: #1c87f3;
          color: #fff !important;
        }
      }
    }

    .screen_tab1 {
      .screen_item1 {
        width: 48%;
        background: #fff !important;
        .ft_item1 {
          width: 300rpx;
        }
      }
    }

    .screen1 {
      width: 100vw;
      margin-left: -30rpx;
      background: #f7f7f7;
      padding: 20rpx 30rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .screen_item1 {
        height: 36px;
        border-radius: 5px;
        color: #94a2b7;
      }

      .ft_item1 {
        position: relative;
        padding: 0 30rpx;
        min-width: 220rpx;
        height: 67rpx;
        background: #fff;
        border-radius: 10rpx;
        color: #94a2b7;

        .ft {
          font-size: 26rpx;
          // width: 120rpx;
        }

        .img100 {
          width: 32rpx;
          height: 32rpx;
        }

        .icon {
          position: absolute;
          top: 25rpx;
          right: 20rpx;
          width: 20rpx;
          height: 20rpx;
        }
      }
    }

    .result {
      margin: 40rpx 0 50rpx 0;
    }

    .content_list {
      margin-top: 40rpx;

      .content_item {
        margin-bottom: 60rpx;

        .item_top,
        .item_bottom {
          display: flex;

          .item_dot {
            margin-right: 10rpx;
            width: 32rpx;
            height: 32rpx;

            .img_icon {
              width: 100%;
              height: 100%;
            }
          }

          .item_title {
            width: calc(100% - 42rpx);
            font-size: 34rpx;
            color: #3d3d3d;
            line-height: 40rpx;
          }
        }

        .item_bottom {
          margin-top: 24rpx;

          .item_dot {
            visibility: hidden;
          }

          .item_info {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 24rpx;
            color: #bcbcbc;
            line-height: 28rpx;
          }
        }
      }
    }
  }
}

.fz26 {
  font-size: 26rpx !important;
}

/deep/.picker {
  display: flex;
  justify-content: center;
}
</style>
